<!---->
<template>
   <div class="warningPopup-container">
       <div class="title-container">
         <span>预警信息</span>
       </div>
       <div class="warningItem-container">
         <div class="warning-item" >
            <div style="width: 24px; height: 100%">
              <div class="warning-item-icon"></div>
            </div>
            <div class="warning-item-content" >
              <div class="warning-item-text">
                <span>管线名称:</span>
                <span>BBB</span>
              </div>
              <div class="warning-item-text">
                <span>预警级别:</span>
                <span>BBB</span>
              </div>
              <div class="warning-item-text">
                <span>预警类别:</span>
                <span>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</span>
              </div>
              <div class="warning-item-text">
                <span>预警时间:</span>
                <span>2023-04-16 12:56:14</span>
              </div>
            </div>
         </div>
          
       </div>
   </div>
</template>

<script>
   
export default {
   name: 'WarningPopup',
   components: {},
   props:{},
   data() {
       return {
           
        }
   },
   computed:{},
   created(){},
   mounted(){},
   filters: {},
   methods: {},
   watch: {}
}
</script>

<style lang="scss" scoped>
   .warningPopup-container {
      width: 400px;
      height: 654px;
      z-index: 999;
      background-image: url("@/assets/warningPopup/warningpopup-bg.png");
      position: absolute;
      right: 14px;
      top: 100px;

      .title-container {
         height: 40px;
         background-color: rgba($color: red, $alpha: 0);

         span {
            font-family: SourceHanSansCN-Medium;
            font-size: 18px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            line-height: 16px;
            letter-spacing: 0px;
            color: #ffffff;
            background-image: linear-gradient(to bottom, #fff 30%, #00baff);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            position: relative;
            top: 16px;
            left: 54px;

         }
      }

      .warningItem-container {
         margin-top: 28px;
         height: 576px;
         width: 90%;
         margin-left: 5%;
         background-color: rgba(245, 55, 22, 0);
         overflow-y: auto;
         overflow-x: hidden;
         
         .warning-item {
            display: flex;
            // padding: 0 0 16px 0;
            padding: 10px 20px 6px 20px;
            background-color: rgba(123,124,125,0);
            margin-bottom: 2px;
            cursor: pointer;

            .warning-item-icon {
               width: 21px;
               height: 20px;
               background-image: url("@/assets/panelTree/locate.png");
               margin-right: 10px;
            }

            .warning-item-content {
               width: 340px;

               .warning-item-text {
                  width: 100%;
                  height: 24px;
                  // background-color: green;
                  display: flex;
                  justify-content: flex-start;
                  text-align: left;
                  padding: 4px;

                  span:nth-child(2n + 1) {
                     width: 80px;
                     text-align: right;
                     font-family: SourceHanSansCN-Regular;
                     font-size: 14px;
                     font-weight: normal;
                     font-stretch: normal;
                     line-height: 18px;
                     letter-spacing: 0px;
                     color: #daf0ff;
                     padding-right: 6px;
                     // background-color: blue;
                     display: block;
                  }

                  span:nth-child(2n) {
                     width: 200px;
                     font-size: 14px;
                     font-weight: normal;
                     font-stretch: normal;
                     line-height: 18px;
                     letter-spacing: 0px;
                     color: #00baff;
                     // background-color: yellow;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                  }
               }
            }
         }

         .warning-item:hover {
            background-color: rgba(15, 97, 175, 0.2);
         }
         &::-webkit-scrollbar {
            width: 10px;
            height: 1px;
            background: rgba(5, 58, 94, 1);
            display: block;
            border-radius: 3px;
            }

            /*滚动条里面小方块*/
            &::-webkit-scrollbar-thumb {
               border-radius: 5px;
               background: #046b98
            }

            /*滚动条里面轨道*/
            &::-webkit-scrollbar-track {
               border-radius: 3px;
               background: transparent;
            }

      }


   }
</style>